<template>
  <el-dialog title="新增部门" :visible="isShowDialog" @close="addCancel">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="addDepartment" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="formData.manager"
          style="width:80%"
          placeholder="请选择"
        >
          <el-option
            v-for="user in employeeSimpleList"
            :key="user.id"
            :value="user.username"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="addOK">{{ $t('btnOK') }}</el-button>
        <el-button size="small" @click="addCancel">{{ $t('btnCancel') }}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 引入获取员工简单信息接口
import { getEmployeeSimple } from '@/api/employee'
import { addDepartment, getDepartmentList, getDepartmentDetailById, updateDepartment } from '@/api/department'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      required: true
    }

  },
  data() {
    // 自定义校验函数`
    // 校验部门编码是否一致
    const checkRepeatCode = async(rules, value, callback) => {
      // 判断是否有重复
      //
      const { depts } = await getDepartmentList()
      // 调用获取部门列表的接口,  需要用到里面的部门编码这个属性
      // 方式一:
      // let isRepeat = false //  默认一开始都是不重复的
      // // 将解构出来到的数据遍历, 判断下code, 是否与输入框的值(value)一致, 如果一致, name就判断为重复
      // depts.forEach(element => {
      //   if (element.code === value) {
      //     isRepeat = true
      //   }
      // })
      // 方式二: 还有一个原生的数组方法, some(),可以简化上面的代码
      // some(): 遍历该数组, 只要有一个符合条件的, 就会返回true,  只有全部不符合, 才会返回false

      // 此时单单知识校验的新增功能, 编辑功能又不一样了,从编辑进去, 部门编码失焦之后, 就会出现, 部门编码不能唯一, 那是因为, 自己跟自己进行比较了, 所以我们需要把点击的部门排除在外
      // 如果区别被?   可以通过formData的id属性, 因为新增没有id这个属性, 而编辑是通过传入一个id, 来达到数据回显的效果, 所以我们可以判断formData.id是否存在, 来区别是新增还是编辑
      let isRepeat
      if (this.formData.id) {
        console.log('编辑')
        // 编辑
        isRepeat = depts.some(element => element.code === value && element.id !== this.nodeData.id)
      } else {
        console.log('新增')
        // 新增
        isRepeat = depts.some(element => element.code === value)
      }
      // 后续操作
      // 如果重复了, 就提示用户, 部门编码重复, 必须唯一,  不重复, 那就直接放行
      if (isRepeat) {
        // 重复, 阻止并提示
        callback(new Error('部门编码必须唯一'))
      } else {
        // 不重复, 放行
        callback()
      }
    }
    // 校验同一部门下,子部门名称是否一致
    const checkRepeatName = async(rules, value, callback) => {
      const { depts } = await getDepartmentList()
      console.log(90, depts)
      // 先将同一部门的子部门筛选出来
      // 方式一:
      // const res = []
      // depts.forEach(element => {
      //   if (element.pid === this.nodeData.id) {
      //     res.push(element)
      //   }
      // })

      // 方式二: 用filter过滤优化
      const res = depts.filter(item => item.pid === this.nodeData.id)
      // 再判断子部门名称是否一致
      const isRepeat = res.some(item => item.name === value)
      // 后续操作
      if (isRepeat) {
        // 重复
        callback(new Error('同一部门, 部门名称不能一样!'))
      } else {
        // 不重复--放行
        callback()
      }
    }
    return {
      // 定义表单数据
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 定义校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          // 部门名称再同一级部门下不能一致
          { validator: checkRepeatName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          // 部门编码全公司不能一致, 需要用到自定义校验函数
          { validator: checkRepeatCode, trigger: 'blur' }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
      },
      employeeSimpleList: [] //  员工简单信息
    }
  },
  async created() {
    this.employeeSimpleList = await getEmployeeSimple()
    console.log('员工信息', this.employeeSimpleList)
  },
  methods: {
    // 点击确定
    async addOK() {
      // 校验表单
      await this.$refs.addDepartment.validate()
      // 判断是编辑还是新增
      if (this.formData.id) {
        // 编辑
        await updateDepartment(this.formData)
      } else {
        // 新增
        // 发请求
        await addDepartment({
          ...this.formData,
          pid: this.nodeData.id ? this.nodeData.id : ''
        })
      }

      // 通知用户
      this.$message.success('操作成功')
      // 关闭弹窗---
      // this.isShowDialog = false
      // 方式一: 不能直接改父组件传过来的值, 只能通知父组件自己改
      // this.$emit('closeDialog')
      // 方式二: 还有一种vue的约定写法, 通过.sync修饰符也可以达到这个效果
      this.$emit('update:isShowDialog', false)
      // 更新页面(通知父组件更新)
      this.$emit('addDepartment')
    },
    // 点击取消
    addCancel() {
      this.formData = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
      // 通知父组件关闭弹窗
      this.$emit('update:isShowDialog', false)
      // 清空校验结果--将输入框恢复为初始值
      this.$refs.addDepartment.resetFields()
    },
    // 根据id获取特点部门, 进行数据回显
    async showDepartmentData(id) {
      console.log('数据回显')
      // 数据回显
      this.formData = await getDepartmentDetailById(id)
      console.log('编辑', this.formData.id)
    }
  }
}
</script>

<style>

</style>
